import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  Button,
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {Actions, Router, Scene} from 'react-native-router-flux';
import HomeScreen from './screens/home/HomeScreen';
import ForumScreen from './screens/forum/ForumScreen';
import ForumList from './screens/forum/List';
import TopicScreen from './screens/topic/TopicScreen';
import TopicCreate from './screens/topic/Create';
import CommentScreen from './screens/comment/CommentScreen';
import CommentDetail from './screens/comment/Detail';
import AccountScreen from './screens/account/AccountScreen';

/**必须指定跟size相同的宽高，否则ios上不显示图标 */
const TabIcon = ({focused, title}) => {
  return (
    <Icon 
      name={focused ? title : title + "-outline"} 
      size={26} 
      style={{width: 26, height: 26, color: focused ? "#3478F6" : "#929292"}}
    />
  )
}

const HB = () => {
  return (
    <Router>
      {/*根容器*/}
      <Scene key="root">
        {/*tabbar容器*/}
        <Scene key="tabbar" tabs={true} hideNavBar swipeEnabled={false} animationEnabled={false}>
          {/*tab容器*/}
          <Scene key="HomeScreenTab" title="home" icon={TabIcon} tabBarLabel="首页">
            {/*tab内容，这里一个tab只有一个内容*/}
            <Scene key="HomeScreen" title="HomeScreen" component={HomeScreen}/>
          </Scene>
          {/*tab容器*/}
          <Scene key="ForumScreenTab" title="forum" icon={TabIcon} tabBarLabel="论坛">
            {/*tab内容，这里有多个内容*/}
            <Scene key="ForumScreen" title="ForumScreen" component={ForumScreen}/>
            <Scene key="ForumList" title="ForumList" component={ForumList} hideTabBar modal/>
            <Scene 
              key="TopicScreen" 
              component={TopicScreen} 
              hideTabBar 
              //renderRightButton会覆盖rightTitle组合
              //renderRightButton={<Button title="发表" onPress={() => alert("发帖")} />} 
              //rightTitle与onRight需要同时存在
              rightTitle="发帖" 
              onRight={() => {}}
              // leftTitle="返回"
              onLeft={() => console.log("onLeft")}
              //需要同时定义onLeft()这个onBack()才有效，现在不想改图标，只想改事件
              onBack={() => Actions.popTo("ForumScreen")}
            />
            <Scene key="TopicCreate" title="TopicCreate" component={TopicCreate} hideTabBar/>
            <Scene key="CommentScreen" title="话题详情" component={CommentScreen} hideTabBar/>
            <Scene key="CommentDetail" title="CommentDetail" component={CommentDetail} hideTabBar/>
          </Scene>
          {/*tab容器*/}
          <Scene key="AccountScreenTab" title="account" icon={TabIcon} tabBarLabel="我的">
            <Scene key="AccountScreen" title="AccountScreen" component={AccountScreen}/>
          </Scene>
        </Scene>
      </Scene>
    </Router>
  )
}

export default HB;